<%@page import="com.jaiz.app.model.Users"%>
<%@page import="com.jaiz.app.controller.db.PersistenceHelper"%>
<%@page import="javax.persistence.Persistence"%>
<%@page import="javax.persistence.EntityManager"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Chiwas Maps</title>
        <link rel="stylesheet" type="text/css" href="styles/main.css" />
        <link rel="stylesheet" type="text/css" href="styles/jquery-ui-1.8.17.custom.css" />
        <style type="text/css">
            html { height: 100% }                       
        </style>

        <script type="text/javascript"
                src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCnKmxEJQpjPM0I3fI_8pxakoelNhW6gDc&sensor=false">
        </script>
        <script type="text/javascript"
                src="scripts/jquery-1.7.1.min.js">
        </script>
        <script type="text/javascript"
                src="scripts/jquery-ui-1.8.17.custom.min.js">
        </script>
        <script type="text/javascript"
                src="scripts/commons.js">
        </script>
        <script type="text/javascript">
            
            $(document).ready(function() {
                $("button").button();
            });
            var directionsDisplay;
            var directionsService = new google.maps.DirectionsService();
            var map;
            var start;
            var end;
            var markersArray = [];
            
            function initMaps() {
                directionsDisplay = new google.maps.DirectionsRenderer();
                
                var myOptions = {
                    center: new google.maps.LatLng(28.67263, -106.11280),
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById("map_canvas"),
                myOptions);
                directionsDisplay.setMap(map);
                directionsDisplay.setPanel(document.getElementById("directionsPanel"));
                 
                google.maps.event.addListener(map, 'click', function(event) {
                    placeMarker(event.latLng);
                });
                
                google.maps.Map.prototype.clearOverlays = function() {
                    if (markersArray) {
                        for (var i = 0; i < markersArray.length; i++ ) {
                            markersArray[i].setMap(null);
                        }
                    }
                }
            }

            function placeMarker(location) {
                var marker = new google.maps.Marker({
                    position: location,
                    map: map
                });
                if(start==null){
                    start = location;                    
                }else{
                    end = location;
                    calcRoute();
                }
                markersArray.push(marker);
                map.setCenter(location);
            }
            
            function calcRoute() {
                //var selectedMode = document.getElementById("mode").value;
                var request = {
                    origin: start,
                    destination: end,
                    // Note that Javascript allows us to access the constant
                    // using square brackets and a string value as its
                    // "property."
                    //travelMode: google.maps.TravelMode[selectedMode]
                    travelMode: google.maps.TravelMode.DRIVING
                };
                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                        map.clearOverlays();
                        start = null;
                        end = null;
                    }
                });
            }
        </script>
    </head>

    <body onload="initMaps()">
        <!-- Begin Wrapper -->
        <div id="wrapper">
            <!-- Begin Header -->
            <div id="header">

                This is the Header		 

            </div>
            <!-- End Header -->

            <!-- Begin Navigation -->
            <div id="navigation">
                <div><input type="email"/><button>Log In</button><button>Register</button></div>
            </div>
            <!-- End Navigation -->

            <!-- Begin Faux Columns -->
            <div id="main">
                <!-- Begin Left Column -->
                <div id="leftmenu">
                    <%@ include file="WEB-INF/jspf/vertical_menu.jspf" %>
                </div>
                <!-- End Left Column -->
                <!-- Begin Right Column -->
                <div id="content">
                    <a href="index.jsp">Index</a>
                    <br /><br />
                    <h1>Jaiz Maps</h1>	 
                    <div id="map_canvas" style="width:100%; height:400px"></div>
                    <div id="directionsPanel" style="width:100%; height:300px; overflow: auto;"></div>
                    <p>                        
                        <br />
                        <br />
                        <%
                            EntityManager em = PersistenceHelper.getEntityManager();
                            Users usr = em.find(Users.class, new Integer(1));
                            out.println(usr.getFirstName() + " " + usr.getLastName());
                        %>
                        Some text... 
                        <br />
                        <br />
                    </p>
                    <!--<div class="clear"></div>-->
                </div>
                <!-- End Right Column -->
                <div class="clear"></div>
            </div>	   
            <!-- End Faux Columns --> 
            <!-- Begin Footer -->
            <div id="footer">
                This is the Footer		
            </div>
            <!-- End Footer -->
        </div>
        <!-- End Wrapper -->
    </body>
</html>
